<template>
  <div class="cursor-pointer" @click.prevent="triggerTweet">
    <div class="text-gray-600 font-medium text-sm flex items-center mb-2">
      <svg
        viewBox="0 0 24 24"
        width="24"
        height="24"
        class="fill-current text-gray-600 w-4 mr-2"
      >
        <path
          class="heroicon-ui"
          d="M5.41 16H18a2 2 0 0 0 2-2 1 1 0 0 1 2 0 4 4 0 0 1-4 4H5.41l2.3 2.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 1 1 1.42 1.4L5.4 16zM6 8a2 2 0 0 0-2 2 1 1 0 0 1-2 0 4 4 0 0 1 4-4h12.59l-2.3-2.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4L18.6 8H6z"
        />
      </svg>
      <span @click.stop.prevent="triggerUser" class="hover:underline cursor-pointer">{{ tweet.user.name }} retweeted</span>
      <span class="text-gray-600 font-normal ml-2">{{ tweet.creation_date }}</span>
    </div>

    <div>
      <component
        :is="`app-tweet-variant-${tweet.original_tweet.type}`"
        :tweet="tweet.original_tweet"
      />
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    tweet: {
      required: true,
      type: Object,
    },
  },

  methods: {
      triggerTweet () {
        window.location.pathname = "./tweets/" + this.tweet.original_tweet.id;
    },
    triggerUser () {
        window.location.pathname = "./" + this.tweet.user.username;
    },
  }
};
</script>
